<template>
	<view :class="[config.style]">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<view class="clockin-header">
			<view class="bg">
				<image :src="data.cover_800" class="cover" mode="widthFix"></image>
				<view class="shade"></view>
			</view>
			<view class="share" @click="share()">
				<text class="text">
					分享
				</text>
				<text class="iconfont">&#xe643;</text>
			</view>
		</view>
		<view class="clockin-section uni-clearfix">
			<view class="content">
				<view class="title">{{data.title}}</view>
				<view class="description text-ellipsis-2">{{data.description}}</view>
				
			</view>
			<view class="clockin-btn-sec">
				<view class="action">
					<view class="continuous">
						<text>已打卡</text>
						<text class="highlight">{{finishTotal}}</text>
						<text>天</text>
					</view>
					
					<view class="task-total">
						<text>任务共 {{taskTotal}} 天</text> 
					</view>
					
					<view class="record" @click="myRecord(taskId,userInfo.memberInfo.uid)">
						<text class="text">
							打卡记录
						</text>
						<text class="iconfont">&#xe62f;</text>
					</view>
				</view>
				
				<view class="btn-sec">
					<button type="default" class="clockin-button" hover-class="button-hover" :class="{disabled:btnDisabled}" @click="openClockin()" :disabled="btnDisabled">
						<text v-if="todayFinish">今日已打卡</text>
						<text v-if="todayHoliday">休息日</text>
						<text v-if="todayTask == false">无需打卡</text>
						<text v-if="btnDisabled == false">立即打卡</text>
					</button>
				</view>
			</view>
			
			<view class="calendar">
				
				<calendar ref='ren' 
				:config="config" 
				:markDays='markDays' 
				:taskDate="taskDate" 
				:holidayDate="holidayDate" 
				:finishDate="finishDate" 
				:offsetDate="offsetDate" 
				:open="true" 
				:disabledAfter='true'  
				@onDayClick='onDayClick' 
				@openOffsetClockin="openOffsetClockin"
				>
				</calendar>
			    
			</view>
		</view>
		
		<!--打卡记录列表-->
		<view class="clockin-lists-section">
			<view class="title">打卡广场</view>
		</view>
		<clockin-record v-if="!loading" ref="clockinRecord" :more="true" :taskId="taskId" :uid="0"></clockin-record>
		
		<!--打卡-->
		<uni-popup ref="openClockin" type="bottom">
			<view class="clockin-edit-section">
				<view class="close" @click="closeClockin()">
					<text class="iconfont">&#xe7a0;</text>
				</view>
				<form @submit="clockinSubmit" @reset="formReset">
					<view class="uni-title title">打卡</view>
					<view class="uni-textarea textarea">
						<textarea name="content" placeholder-style="color:#666" show-confirm-bar="false" placeholder="说说今天的感想和收获吧." v-model="content" />
					</view>
					<view>
						<imgUpload :count="5" @submitImgs="submitImgs" :name="name" :images="images"></imgUpload>
					</view>
					<view class="submit">
						<button class="button" hover-class="button-hover" type="default" maxlength="120" form-type="submit">立即打卡</button>
					</view>
				</form>
			</view>
		</uni-popup>
		
		<!--补卡提示框-->
		<uni-popup ref="openOffsetClockin" type="bottom">
			<view class="clockin-edit-section">
				<view class="close" @click="closeOffsetClockin()">
					<text class="iconfont">&#xe7a0;</text>
				</view>
				<form @submit="offsetSubmit" @reset="formReset">
					<view class="uni-title title">{{`${offsetDateObject.year}-${offsetDateObject.month}-${offsetDateObject.date}`}} 补卡</view>
					<view class="toast-box">
						<view class="total">
							该任务可补卡 <text class="count">{{offsetNum}}</text> 次
						</view>
						<view class="user-total">
							已补卡 <text class="count">{{offsetFinishCount}}</text> 次
						</view>
					</view>
					<view class="uni-textarea textarea">
						<textarea name="content" placeholder-style="color:#666" show-confirm-bar="false" placeholder="说说今天的感想和收获吧." v-model="content" />
					</view>
					<view>
						<imgUpload :count="5" @submitImgs="submitImgs" :name="name" :images="images"></imgUpload>
					</view>
					<view class="submit">
						<button class="button" hover-class="button-hover" type="default" maxlength="120" form-type="submit">立即补卡</button>
					</view>
				</form>
			</view>
		</uni-popup>
		
		<!--任务完成提示框-->
		<uni-popup ref="taskFinishPop" type="center">
			<view class="clockin-finish-section">
				<view class="bg">
					<image class="image" :src="awardsPopImg" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="title">
						打卡任务已完成
					</view>
					<view class="description" v-if="finishAwardsType == 'score'">
						<text>您已成功获取</text>
						<text class="val">{{finishAwardsVal}}</text>
						<text>积分奖励</text>
					</view>
					<view class="description" v-if="finishAwardsType == 'price'">
						<text>您已成功获取</text>
						<text class="val">{{finishAwardsVal}}元</text>
						<text>现金奖励</text>
					</view>
				</view>
				<view class="detail">
					<button class="btn btn-awards" hover-class="hover" @click="goToawards">查看奖励</button>
				</view>
				<view class="close" @click="closeTaskFinishPop()">
					<text class="iconfont">&#xe622;</text>
				</view>
			</view>
		</uni-popup>
		
		<!--分享海报弹窗-->
		<uni-popup ref="openPosterDetail" type="center" :mask-click="false">
			<view class="open-poster-detail">
				<view class="open-detail-item">
					<view class="content">
						<view class="close" @click="closeDetail()">
							<text class="iconfont">&#xe676;</text>
						</view>
						<view class="canvas">
							<canvas class="canvas" :style="{width:canvasW + 'px', height:canvasH + 'px'}" id="my-canvas" canvas-id="my-canvas">
								<img :src="posterImage" class="linkimage" mode="widthFix" />
							</canvas>
						</view>
						<!-- #ifdef MP -->
						<view class="save-btn" @click.stop="saveImage">保存图片</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//#ifdef MP
	import siteInfo from '../../../siteinfo.js'
	//#endif
	//#ifdef H5
	import siteInfo from '../../../siteinfoH5.js'
	//#endif
	import { mapState,mapMutations } from 'vuex'
	import ImgUpload from '@/common/components/imgUpload.vue'
	import Calendar from './components/calendar.vue'
	import ClockinRecord from './components/clockinRecord.vue'
	
	export default {
		components:{
		    Calendar,
			ImgUpload,
			ClockinRecord
		},
		data() {
			return {
				loading: true, // 加载中
				siteroot: '', // 跟域名
				urlParams: {}, // url传递过来的参数
				userInfo:{}, // 用户数据
				btnDisabled: false, // 禁止打卡
				taskId: 0, // 打卡任务ID
				data: {}, // 任务详情数据
				taskTotal: 0, // 任务总天数
				continuous: 0, // 连续打卡天数
				finishTotal: 0, // 用户打卡总次数
				taskDate: [], // 任务打卡日期
				holidayDate: [], // 休息日期
				finishDate: [], // 已打卡日期
				offsetDate: [], // 需补卡日期
				offsetNum: 0, // 任务可补卡次数
				todayFinish: false, // 今日是否已打卡
				todayHoliday: false, // 今天是否休息日
				todayTask: true, // 今日是否任务日期内
				curDate:'', // 选中的日期
				markDays:[], // 打标日期
				/*******************************/
				content: '',//评价内容
				images: [], //评价图片
				/*******************************/
				offsetFinishCount: 0, // 用户已补卡次数
				offsetDateObject: {}, // 补卡的日期对象
				/*******************************/
				finishTaskRecord: false, // 打卡任务是否已完成
				awardsPopImg: '',        // 任务完成弹出框图片
				finishAwardsType: 'none', // 奖励类型
				finishAwardsVal: '', // 奖励数量
				/*******************************/
				today: '',
				canvasW: 280,
				canvasH: 430,
				qrcode: '', // 二维码
				remark: '', // 金句
				posterShow: false, // 
				posterAction: false,
				posterImage: ''
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    await this.$onLaunched;
			this.urlParams = option
			this.taskId = this.urlParams.id
			if(this.urlParams.promoter_uid){
				uni.setStorageSync('promoter_uid',this.urlParams.promoter_uid)
			}
			this.getSiteRoot()
			await this.getUserInfo()
			// 获取任务数据
			await this.getData()
			// 获取用户打卡记录数据
			await this.getUserRecordData()
			await this.progress()
			// 查询任务是否已完成并发放奖励
			await this.isFinishTask()
			this.$nextTick(() => {
				console.log('taskTotal',this.taskTotal)
				//加载完成
				this.loading = false
			})
		},
		computed: {
			...mapState(['config'])
		},

		methods: {
			
			getSiteRoot() {
				let domain = siteInfo.siteroot.split('/'); //以“/”进行分割
				let siteroot = domain[0] + "//" + domain[2] + "/";
				console.log(siteroot)
				this.siteroot = siteroot
			},
			/**
			 * 获取打卡任务数据
			 */
			getData() {
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.id = params.id
					//获取数据
					let url = ''
						//#ifdef MP-WEIXIN
						data.m = 'muu_classroom'
						data.action = 'detail'
						url = 'entry/wxapp/clockin'
						//#endif
						//#ifdef H5
						data.m = 'muu_classroom_plugin_clockin'
						data.action = 'detail'
						url = 'entry/site/clockin'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								that.taskTotal = res.data.data.type_set.count
								that.taskDate = res.data.data.task_date
								that.holidayDate = res.data.data.holiday_date
								that.offsetNum = res.data.data.offset_num
								uni.setNavigationBarTitle({
								　　title:res.data.data.title
								})
								resolve(res.data)
							}
						}
					})
				})
			},
			
			/**
			 * 获取用户打卡记录
			 */
			getUserRecordData() {
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.task_id = params.id
					//获取数据
					let url = ''
						//#ifdef MP-WEIXIN
						data.m = 'muu_classroom'
						data.action = 'record'
						url = 'entry/wxapp/clockin'
						//#endif
						//#ifdef H5
						data.m = 'muu_classroom_plugin_clockin'
						data.action = 'record'
						url = 'entry/site/clockin'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.continuous = res.data.data.continuous
								that.finishTotal = res.data.data.finish_total
								that.finishDate = res.data.data.finish_date
								that.offsetDate = res.data.data.offset_date
								that.todayFinish = res.data.data.today_finish
								that.todayHoliday = res.data.data.today_holiday
								that.todayTask = res.data.data.today_task
								that.offsetFinishCount = res.data.data.offset_finish_total
								if(that.todayFinish == true){
									that.btnDisabled = true
								}
								if(that.todayHoliday == true){
									that.btnDisabled = true
								}
								if(that.todayTask == false){
									that.btnDisabled = true
								}
								resolve(res.data)
							}
						}
					})
				})
			},
			
			/**
			 * 计算打卡总进度
			 */
			progress() {
				let p = this.finishTotal/this.taskTotal
					p = Math.ceil(p * 100)
				//console.log(p)
			},
			
			/**
			 * 展开打卡操作区
			 */
			openClockin() {
				this.$refs.openClockin.open()
			},
			
			/**
			 * 关闭打卡操作区
			 */
			closeClockin (){
				this.$refs.openClockin.close()
			},
			
			/**
			 * 展开补卡卡操作区
			 */
			openOffsetClockin(date) {
				this.offsetDateObject = date
				// 是否禁止补卡
				if(this.offsetNum == 0){
					uni.showToast({
						icon: 'none',
						title: '该任务禁止补卡',
						duration: 2000
					});
					return false
				}
				if(this.offsetFinishTotal >= this.offsetNum){
					uni.showToast({
						icon: 'none',
						title: '补卡次数已使用完~',
						duration: 2000
					});
					return false
				}
				
				this.$refs.openOffsetClockin.open()
			},
			/**
			 * 关闭补卡卡操作区
			 */
			closeOffsetClockin() {
				this.$refs.openOffsetClockin.close()
			},
			
			/**
			 * 打卡图片组
			 * @param {Object} data
			 */
			submitImgs: function(data) {
				//console.log(data, "获取到的图片组" + data.length + "张")
				//处理图片数组
				let images = new Array()
				data.map(item=>{
					images.push(item.image)
				})
				//console.log(images)
				this.images = images
				console.log(this.images,'已上传的图片组')
			},
			
			/**
			 * 立即打卡
			 */
			async clockinSubmit() {
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'clockin'
					data.task_id = this.urlParams.id
					data.content = this.content
					data.images = this.images
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					data.m = 'muu_classroom'
					url = 'entry/wxapp/clockin'
					//#endif
					//#ifdef H5
					data.m = 'muu_classroom_plugin_clockin'
					url = 'entry/site/clockin'
					//#endif
				this.util.request({
					url : url,
					data : data,
					method: 'POST',
					
					success: function (res) {
						if (res.data.code == 200) {
							//console.log(res)
							that.getData()
							that.getUserRecordData().then(()=>{
								// 关闭打卡框
								that.closeClockin()
								// 弹出分享海报
								that.share()
								// 判断任务已完成，触发奖励操作
								that.isFinishTask()
							})
						}
						if (res.data.code == 0 && res.data.data == 'login') {
							//触发登录框
							that.$refs.login.loginDialog()
						}
						
						uni.showToast({
							title: res.data.msg,
							duration: 2000
						});
					}
				})
			},
			
			/**
			 * 补卡操作
			 * @param {Object} i
			 */
			offsetSubmit() {
				console.log('开始补卡')
				let that = this
				let params = this.urlParams
				let year = this.offsetDateObject.year
				let month = this.offsetDateObject.month
				let day = this.offsetDateObject.date
				let date = year + '-' + month + '-' + day
				console.log(date)
				let data = {}
					data.action = 'offset'
					data.task_id = this.urlParams.id
					data.content = this.content
					data.images = this.images
					// 补卡日期
					data.date = date
				//获取数据
				
				let url = '';
					//#ifdef MP-WEIXIN
					data.m = 'muu_classroom'
					url = 'entry/wxapp/clockin'
					//#endif
					//#ifdef H5
					data.m = 'muu_classroom_plugin_clockin'
					url = 'entry/site/clockin'
					//#endif
				this.util.request({
					url : url,
					data : data,
					method: 'POST',
					
					success: function (res) {
						if (res.data.code == 200) {
							//console.log(res)
							that.getData()
							that.getUserRecordData().then(()=>{
								// 关闭打卡框
								that.closeClockin()
								// 弹出分享海报
								that.share()
								// 判断任务已完成，触发奖励操作
								that.isFinishTask()
							})
						}
						if (res.data.code == 0 && res.data.data == 'login') {
							//触发登录框
							that.$refs.login.loginDialog()
						}
						
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							duration: 2000
						});
					}
				})
			},
			
			/**
			 * 查询是否已完成任务并发放奖励(已发放奖励不再发放)
			 */
			isFinishTask() {
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.task_id = params.id
					//获取数据
					let url = ''
						//#ifdef MP-WEIXIN
						data.m = 'muu_classroom'
						data.action = 'finish'
						url = 'entry/wxapp/clockin'
						//#endif
						//#ifdef H5
						data.m = 'muu_classroom_plugin_clockin'
						data.action = 'finish'
						url = 'entry/site/clockin'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.finishTaskRecord = true
								that.awardsPopImg = that.siteroot + 'addons/muu_classroom_plugin_clockin/resource/images/awards_pop.png'
								// 触发提示框
								that.taskFinishPop()
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 我的打卡记录
			 */
			myRecord(task_id = 0, uid = 0) {
				console.log(task_id, uid)
				let page = 'record'
				let url = page + '?task_id=' + task_id + '&uid=' + uid
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			/**
			 * 分享海报
			 */
			share() {
				let that = this
				this.getRandRemark().then((res)=>{
					//#ifdef MP-WEIXIN
					let qrcode_url = this.util.url('entry/wxapp/qrcode',{
						'type': that.type,
						'type_id': Number(that.data.id),
						'm': 'muu_classroom'
					})
					//#endif
					//#ifdef H5
					let qrcode_url = this.util.url('entry/site/qrcode',{
						'url': encodeURI(this.siteroot + 'addons/muu_classroom/h5/?i=' + siteInfo.uniacid),
						'm': 'muu_classroom'
					})
					console.log(qrcode_url)
					console.log(res.data.content)
					//#endif
					
					that.is_show_model = false
					
					that.showCanvas(qrcode_url, res.data.content)
				})
			},
			
			/**
			 * 触发任务完成提示框
			 */
			taskFinishPop(){
				if(this.finishTaskRecord == true){
					console.log('触发任务完成提示')
					let that = this
					let data = {}
						data.action = 'awards_detail'
						data.task_id = this.taskId
					let url = '';
					//#ifdef MP-WEIXIN
					data.m = 'muu_classroom'
					url = 'entry/wxapp/clockin'
					//#endif
					//#ifdef H5
					data.m = 'muu_classroom_plugin_clockin'
					url = 'entry/site/clockin'
					//#endif
					return new Promise((resolve, reject) => {
						this.util.request({
							url : url,
							data : data,
							method: 'POST',
							success: function (res) {
								console.log(res.data)
								that.finishAwardsType = res.data.data.awards.type
								if(res.data.data.awards.type == 'score'){
									that.finishAwardsVal = res.data.data.awards.score
								}
								if(res.data.data.awards.type == 'price'){
									that.finishAwardsVal = res.data.data.awards.price
								}
								that.$refs.taskFinishPop.open()
								resolve(res.data)
							},
						})
					})
					
				}
				
			},
			
			/**
			 * 关闭任务完成提示框
			 */
			closeTaskFinishPop() {
				this.$refs.taskFinishPop.close()
			},
			
			/**
			 * 我的奖励列表
			 */
			goToawards() {
				let page = 'awards'
				let url = page
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			//随机获取一条金句
			getRandRemark() {
				let data = {}
					data.action = 'remark'
				let url = '';
				//#ifdef MP-WEIXIN
				data.m = 'muu_classroom'
				url = 'entry/wxapp/clockin'
				//#endif
				//#ifdef H5
				data.m = 'muu_classroom_plugin_clockin'
				url = 'entry/site/clockin'
				//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						method: 'POST',
						success: function (res) {
							console.log(res.data)
							this.remark = res.data.data.content
							if(res.data.data.author){
								this.remark = this.remark + ' --' + res.data.data.author
							}
							resolve(res.data)
						},
					})
				})
			},
			
			//显示
			async showCanvas(qrcode, remark){
				this.qrcode = qrcode
				this.remark = remark
				//#ifdef MP-WEIXIN
				if(this.posterShow == true){
					this.$refs.openPosterDetail.open()
				}else{
					await this.__init()
					this.$refs.openPosterDetail.open()
				}
				//#endif
				
				//#ifdef H5
				await this.__init()
				this.$refs.openPosterDetail.open()
				//#endif
			},
			
			//初始化画布
			async __init(){
				let that = this
				uni.showLoading({
				    title: '加载中...',
					mask: true
				})
				let ctx = uni.createCanvasContext('my-canvas',this)
				ctx.beginPath();
				//设置画布背景透明
				ctx.setFillStyle('rgba(255, 255, 255, 1)')
				//设置画布大小
				ctx.fillRect(0,0,280,430)
				//绘制圆角背景
				//this.drawRoundRect(ctx, 0, 0, this.canvasW, this.canvasH,0,'#FFFFFF')
				//获取封面图片
				let headerImg = await this.getImageInfo(this.data.cover_400)
				let hW = 280
				let hH = 200
				//绘制封面图
				ctx.drawImage(headerImg.path,0,0,hW,hH,0)
				
				//绘制金句
				ctx.setFontSize(14);
				ctx.setFillStyle('#858585');
				this.drawText(ctx, '“'+this.remark+'”', 10, hH + 30, 30, 260);// 调用行文本换行函数
				
				//绘制打卡信息
				ctx.setFontSize(10);
				ctx.setFillStyle('#666');
				ctx.fillText('学习目标' , 68, 300);
				ctx.setFontSize(18);
				ctx.setFillStyle('#000');
				ctx.fillText(this.taskTotal + '天', 68, 320);
				
				ctx.setFontSize(10);
				ctx.setFillStyle('#666');
				ctx.fillText('已打卡' , 188, 300);
				ctx.setFontSize(18);
				ctx.setFillStyle('#000');
				ctx.fillText(this.finishTotal + '天', 188, 320);
				
				//绘制虚线
				this.drawDashLine(ctx,10,(hH + 130),(this.canvasW-10),(hH + 130),5)
			
				//绘制头像
				let avatar = await this.getImageInfo(this.userInfo.memberInfo.avatar)
				this.drawRoundImg(ctx, avatar.path, 10, hH + 160, 40, 40, 20)
				//绘制用户昵称
				ctx.setFontSize(12);
				ctx.setFillStyle('#858585')
				ctx.font = 'bold'
				this.drawText(ctx, this.userInfo.memberInfo.nickname, 55, hH + 185, 30, 100);// 调用行文本换行函数
			
				//小程序码
				let qrcodeImg = await this.getImageInfo(this.qrcode)
				ctx.drawImage(qrcodeImg.path,190, hH + 140, 82, 82)
				
				//绘制日期
				ctx.shadowOffsetX=1
				ctx.shadowOffsetY=1
				ctx.shadowColor = "rgab(0,0,0,0.8)"
				let today = this.todayDate()
				ctx.setFontSize(20);
				ctx.setFillStyle('#ffffff');
				this.drawText(ctx, today.year+'.'+today.month , 190, hH - 10, 30, 180);
				
				ctx.setFontSize(40);
				ctx.setFillStyle('#ffffff');
				ctx.fillText(today.day , 220, hH - 35);
				//延迟渲染
				setTimeout(()=>{
					ctx.draw(true,()=>{
						uni.hideLoading()
						// #ifdef H5
						uni.canvasToTempFilePath({
							canvasId: 'my-canvas',
							quality: 1,
							complete: (res) => {
								console.log(res)
								let base64 = res.tempFilePath
								that.posterImage = base64
							}
						},this);
						// #endif
					})
					this.posterShow = true
					this.posterAction = true
					
				},800)
			},
			
			/**
			 * 获取进入日期
			 */
			todayDate() {
				let today = new Date()
				let year = today.getFullYear()
				let month = today.getMonth() + 1
					if(month < 10){
						month = '0' + month
					}
				let day = today.getDate()
				if(day < 10){
					day = '0' + day
				}
			
				let date = {
					'year' : year,
					'month': month,
					'day': day
				}
				return date
			},
			//绘制实心圆
			drawEmptyRound(ctx,x,y,radius){
				ctx.save()
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, 2 * Math.PI,true);
				ctx.setFillStyle('rgba(0, 0, 0, .4)')
				ctx.fill();
				ctx.restore()
				ctx.closePath()
			},
			//绘制虚线
			drawDashLine(ctx,x1,y1,x2,y2,dashLength){
				ctx.setStrokeStyle("#cccccc")//设置线条的颜色
				ctx.setLineWidth(1)//设置线条宽度
				var dashLen = dashLength,
				xpos = x2 - x1, //得到横向的宽度;
				ypos = y2 - y1, //得到纵向的高度;
				numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen); 
				//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
				for(var i=0; i<numDashes; i++){
				 if(i % 2 === 0){
					 ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); 
					 //有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
				  }else{
					  ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
				  }
				}
				ctx.stroke();
			},
			//带圆角图片
			drawRoundImg(ctx, img, x, y, width, height, radius){
				ctx.beginPath()
				ctx.save()
				// 左上角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI)
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, x, y, width, height);
				ctx.restore()
				ctx.closePath()
			},
			//圆角矩形
			drawRoundRect(ctx, x, y, width, height, radius, color){
				ctx.save();
				ctx.beginPath();
				ctx.setFillStyle(color); 
				ctx.setStrokeStyle(color)
				ctx.setLineJoin('round');  //交点设置成圆角
				ctx.setLineWidth(radius);
				ctx.strokeRect(x + radius/2, y + radius/2, width - radius , height - radius );
				ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
				ctx.stroke();
				ctx.closePath();
			},
			//获取图片
			getImageInfo(imgSrc){
				//console.log(imgSrc)
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
							console.log('获取图片成功',image)
						},
						fail: (err) => {
							reject(err);
							console.log('获取图片失败',err)
						}
					});
				});
			},
			/**
			 * 绘制多行文本
			 * ctx canvas对象
			 * str 文本
			 * leftWidth 距离左侧的距离
			 * initHeight 距离顶部的距离
			 * titleHeight 文本的高度
			 * canvasWidth 文本的宽度
			 * @returns {*}
			 */
			drawText(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
			    let lineWidth = 0;
			    let lastSubStrIndex = 0; //每次开始截取的字符串的索引
			    for (let i = 0; i < str.length; i++) {
			        lineWidth += ctx.measureText(str[i]).width;
			        if (lineWidth > canvasWidth) {
			            ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
			            initHeight += 22; //22为 文字大小20 + 2
			            lineWidth = 0;
			            lastSubStrIndex = i;
			            titleHeight += 22;
			        }
			        if (i == str.length - 1) { //绘制剩余部分
			            ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
			        }
			    }
			    // 标题border-bottom 线距顶部距离
			    titleHeight = titleHeight + 10;
			    return titleHeight;
			},
			
			//保存图片到相册
			saveImage(){
			
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'my-canvas',
					quality: 1,
					complete: (res) => {
						console.log(res)
						// #ifdef MP
						//console.log('保存到相册',res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
							}
						})
						// #endif
					}
				},this);
			},
			
			/**
			 * 关闭分享海报
			 */
			closeDetail() {
				this.$refs.openPosterDetail.close()
				
				// 触发任务完成提示
				this.taskFinishPop()
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo() {
				let userInfo = uni.getStorageSync('userInfo') || {}
				if(Object.keys(userInfo).length > 0){
					this.userInfo = userInfo
				}else{
					this.util.getUserInfo((res)=>{
						this.userInfo = res
					})
				}
			},
		},
		onReachBottom() {
			console.log('页面滚动到底部')
			this.$refs.clockinRecord.getClockinlist()
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;

	}
	.clockin-header {
		position: relative;
		
		.bg {
			position: relative;
			.cover {
				width: 100%;
				display: block;
			}
			.shade {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				background: rgba(0,0,0,0.35);
			}
		}
		.share {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			background-color: #fff;
			padding: 4rpx 20rpx 8rpx 20rpx;
			border-radius: 24rpx;
			z-index: 2;
			color: #666;
			.text {
				font-size: 26rpx;
				padding-right: 10rpx;
			}
			.iconfont {
				font-size: 26rpx;
			}
		}
	}
	.clockin-section {
		position: relative;
		z-index: 2;
		margin-top: -350rpx;
		padding: 0 20rpx;

		>.content {

			padding: 60rpx 30rpx 20rpx 30rpx;
			>.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #fff;
				line-height: 42rpx;
				text-shadow:3rpx 3rpx 3rpx #222;
			}
			>.description {
				font-size: 24rpx;
				line-height: 36rpx;
				color: #fff;
			}
			
		}
		.clockin-btn-sec {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 20rpx;
			
			margin-bottom: 20rpx;
			.action {
				display: flex;
				color: #888;
				font-size: 24rpx;
				
				.continuous {
					margin-bottom: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					color: #000;
					.highlight {
						font-size: 34rpx;
						color :#ff6600;
						padding: 0 6rpx;
					}
				}
				.task-total {
					flex: 1;
					line-height: 52rpx;
					padding-left: 20rpx;
				}
				.record {
					width: 140rpx;
					line-height: 52rpx;
					.text {
						padding-right: 6rpx;
					}
					.iconfont {
						font-size: 22rpx;
					}
				}
			}
			
			.btn-sec {
				margin-bottom: 20rpx;
				.clockin-button {
					
					color: #fff;
					border-radius: 30rpx;
					&::after {
						border: 0;
						
					}
				}
			}
		}
		
		.calendar {
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			
		}
	}
	
	.clockin-lists-section {
		padding: 20rpx;
		>.title {
			margin-bottom: -20rpx;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 42rpx;
		}
	}
	
	.clockin-edit-section {
		position: relative;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx 20rpx 0 0;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 20;
		}
		.title {
			font-size: 32rpx;
			line-height: 96rpx;
			font-weight: 700;
			text-align: center;
		}
		.toast-box {
			padding: 20rpx 0;
			.total {
				font-size: 28rpx;
			}
			.user-total {
				font-size: 28rpx;
			}
			.count {
				padding: 0 10rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #ff6600;
			}
		}
		.textarea {
			border-radius: 10rpx;
			background-color: #f8f8f8;
			padding: 16rpx;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			textarea {
				width: 100%;
				height: 100rpx;
			}
		}
		.submit {
			.button {
				display: block;
				color: #fff;
				border-radius: 30rpx;
				&::after {
					border: 0;
					
				}
			}
			.button-hover {
				color: #fff;
			}
		}
	}
	
	.open-poster-detail {
		
		.content{
			position: relative;
			.close {
				position: absolute;
				top: -20rpx;
				right: -20rpx;
				color: #fff;
				z-index: 999;
				text {
					font-size: 42rpx;
				}
			}
			.canvas {
				
			}
			.save-btn{
				margin-top: 35rpx;
				color: #FFFFFF;
				background: $Blue;
				padding: 15rpx 40rpx;
				border-radius: 50rpx;
				text-align: center;
			}
		}
	}
	
	/*任务完成弹出框*/
	.clockin-finish-section {
		positon: relative;
		width: 660rpx;
		height: 580rpx;
		.bg {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			.image {
				width: 100%;
			}
		}
		>.content {
			positon: relative;
			z-index: 102;
			margin-top: 300rpx;
			text-align: center;
			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #8C2807;
				margin-bottom: 20rpx;
			}
			.description {
				line-height: 48rpx;
				font-size: 28rpx;
				color: #B6785F;
				.val {
					padding: 0 10rpx;
				}
			}
		}
		>.detail {
			margin-top: 30rpx;
			.btn-awards {
				margin: 0 140rpx;
				color: #fff;
				background-color: #FF330E;
				border-radius: 60rpx;
				&::after {
					border: 8rpx solid #FF7E4A;
				}
			}
			.hover {
				background-color: #FF7E4A;
			}
		}
		
		>.close {
			margin-top: 150rpx;
			text-align: center;
			color: #fff;
			.iconfont {
				font-size: 80rpx;
			}
		}
	}
	
	.linkimage {
		width: 100%;
	}
	
	.disabled {
		opacity: .6;
	}
	

	/*页面风格设计*/
	.Blue {
		.clockin-btn-sec {
			.action {
				.continuous {
					.highlight {
						color: $Blue;
					}
				}
			}
			.clockin-button {
				background-color: $Blue;
			}
		}
		
		.clockin-edit-section {
			.submit {
				.button {
					background-color: $Blue;
				}
				.button-hover {
					background-color: $Blue-hover;
				}
			}
		}
		
	}
	.Green {
		.clockin-btn-sec {
			.action {
				.continuous {
					.highlight {
						color: $Green;
					}
				}
			}
			.clockin-button {
				background-color: $Green;
			}
		}
		.clockin-edit-section {
			.submit {
				.button {
					background-color: $Green;
				}
				.button-hover {
					background-color: $Green-hover;
				}
			}
		}
	}
	.LightRed {
		.clockin-btn-sec {
			.action {
				.continuous {
					.highlight {
						color: $LightRed;
					}
				}
			}
			.clockin-button {
				background-color: $LightRed;
			}
		}
		.clockin-edit-section {
			.submit {
				.button {
					background-color: $LightRed;
				}
				.button-hover {
					background-color: $LightRed-hover;
				}
			}
		}
	}
	.Orange {
		.clockin-btn-sec {
			.action {
				.continuous {
					.highlight {
						color: $Orange;
					}
				}
			}
			.clockin-button {
				background-color: $Orange;
			}
		}
		.clockin-edit-section {
			.submit {
				.button {
					background-color: $Orange;
				}
				.button-hover {
					background-color: $Orange-hover;
				}
			}
		}
	}
	.LightPink {
		.clockin-btn-sec {
			.action {
				.continuous {
					.highlight {
						color: $LightPink;
					}
				}
			}
			.clockin-button {
				background-color: $LightPink;
			}
		}
		.clockin-edit-section {
			.submit {
				.button {
					background-color: $LightPink;
				}
				.button-hover {
					background-color: $LightPink-hover;
				}
			}
		}
	}
	.Magenta {
		.clockin-btn-sec {
			.action {
				.continuous {
					.highlight {
						color: $Magenta;
					}
				}
			}
			.clockin-button {
				background-color: $Magenta;
			}
		}
		.clockin-edit-section {
			.submit {
				.button {
					background-color: $Magenta;
				}
				.button-hover {
					background-color: $Magenta-hover;
				}
			}
		}
	}
</style>
